<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="auto">
    <el-form-item label="级别名称">
      <el-input v-model="form.levelName" />
    </el-form-item> 
    <el-form-item label="状态">
      <el-select v-model="form.levelStatus" placeholder="请选择状态" style="width: 220px">
        <el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancleEdit">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="edit">
import { ref, reactive } from "vue";
import { saveOrUpdateInfo, getById } from '@/api/CareManagement/careLevel/index';
import { ElMessageBox, ElNotification } from "element-plus";
import { onMounted } from "vue";

// 表单信息
const form = ref({
  serialNumber: "",
  nursingName: "",
  servicePrice: "",
  message: "",
});

const optionsDelete = [
  {
    value: "0",
    label: "显示",
  },
  {
    value: "1",
    label: "隐藏",
  },
];

const optionsStatus = [
  {
    value: "1",
    label: "启用",
  },
  {
    value: "2",
    label: "禁用",
  },
];

// 代表父组件传过来的closeEdit函数
const { closeEdit, editId } = defineProps(["closeEdit", "editId"]);

// 保存按钮点击事件
const onSubmit = () => {
  // console.log('submit!')
  
  saveOrUpdateInfo(form.value).then((success) => {
    ElNotification({
      title: "消息",
      type: "success",
      message: "保存成功",
    });
    closeEdit(true);
  });
};
const showModAdd = ref(false);
// 点击取消按钮
const cancleEdit = () => {
  closeEdit(false);
};
// 当修改操作的到时候 根据主键查询 通过调用getById函数来获取指定editId的用户数据 并将相关数据填充到表单中
const pageGetById = async () => {
  try {
    // 异步调用getById函数获取用户数据
    const user = await getById(editId);
    if (user) {
      form.value = user;
      console.log(user);
      // form.username = user.username;
      // form.password = user.password;
      // form.nickname = user.nickname;
    } else {
      console.warn("未找到id");
    }
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};
//  function pageGetById() {
//     getById(editId).then(user => {
//         form.value = user
//     })
// }

onMounted(() => {
  // 如果获取到editId，则代表修改用户信息
  if (editId) {
    pageGetById();
  } else {
    // alert("create ")
    form.value.password = "$2a$10$sfNC6al9K7JJA.ymgOs/DucbubQgtWGIHsg7h5Vd2OJYzxbNGmiZ.";
    form.value.isDeleted = 0;
  }
});
</script>

<style scoped>
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 15px 5px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

/* .demo-form-inline .el-date-picker {
  --width: 10px;
} */

/* .demo-form-inline .el-select {
  --el-select-width: 100px;
} */
</style>
